<template>
  <div
    v-visibility-change="change"
    class="qn-video-item"
    @click="selectVideo"
    :class="{ select: videoChoose && bindClick }"
  >
    <div v-if="videoSrc === ''" class="no-video">暂未播放视频</div>
    <!--   -->
    <qnPlay
      v-else
      :playerIndex="playerIndex"
      ref="qnPlay"
      @reconnet="reconnet"
      :playerOptions="playerOptions"
    ></qnPlay>
  </div>
</template>
<script>
import qnPlay from "./qnPlay";
// import {
//   playRtmpById,
//   finishRtmpById,
//   ptzControl,
//   getHeartBeat,
// } from "@/api/home.js";
export default {
  props: {
    bindClick: {
      type: [Boolean],
      default: false,
    },
    playerIndex: {
      type: [Number],
      default: 0,
    },
  },
  components: { qnPlay },
  data() {
    return {
      videoPlayTimer: null,
      videoSrc: "",
      videoChoose: false,
      playerOptions: {
        url: "",
        container: "",
        autoplay: true,
        loggerLevel: 3,
        isLive: true,
        muted: true,
        // hls: { isG711: true }, // 指明该资源为 G711 HLS
        // g711Wasm: "https://vaas.newlyai.com/static/aac_wasm.wasm"
      },
      timerID: "",
    };
  },
  watch: {
    videoSrc(val) {
      if (val) {
        this.playerOptions.url = val;
      }
    },
  },
  beforeDestroy() {
    window.clearInterval(this.videoPlayTimer);
  },
  mounted() {
    this.timer();
  },
  methods: {
    timer() {
      var that = this;
      this.timerID = setInterval(function () {
        that.reconnet(that.playerIndex);
      },30 * 60 * 1000 + that.playerIndex*3*1000);
    },
    change(evt, hidden) {
      var that = this;
      //hidden为false的时候，表示从别的页面切换回当前页面
      //hidden为true的时候，表示从当前页面切换到别的页面
      if (hidden === false) {
        // console.log("再次回到当前页,就触发视频重连...");
        let playerIndex = this.playerIndex;
        var leaveTime = sessionStorage.getItem("leaveTime");
        var nowTime = new Date().getTime();
        // 离开页面再次进来逐个重连
        let st_recoonet = setTimeout(() => {
          clearTimeout(st_recoonet);
          that.reconnet(playerIndex);
        }, (playerIndex + 1) * 5 * 1000);
        // this.reconnet(playerIndex);
      } else {
        // console.log("离开当前页了！");
      }
    },
    selectVideo() {
      if (this.bindClick) {
        this.videoChoose = !this.videoChoose;
        this.$emit("select", this.videoChoose);
      }
    },
    setChoose(val) {
      this.videoChoose = val;
    },
    reconnet(position) {
      window.clearInterval(this.timerID);
      var _this = this;
      //触发重连，将本地存储的视频设备信息取出
      var ipcArrs = JSON.parse(sessionStorage.getItem("ipcArrs"));
      if (
        ipcArrs !== null &&
        ipcArrs["pos_" + position] !== null &&
        typeof ipcArrs["pos_" + position] !== "undefined"
      ) {
        var data = ipcArrs["pos_" + position].data;
        var gatewayIndex = ipcArrs["pos_" + position].gatewayIndex;
        //end触发重连，将本地存储的视频设备信息取出
        _this.videoSrc = "";
        playRtmpById({
          deviceIndex: data.deviceIndex,
          protocol: "HLS",
          gatewayIndex: gatewayIndex,
          channelNum: data.number,
          streamId: "1",
        })
          .then((res) => {
            if (res.data.code === 0) {
              // -------------
              let tmpurl = res.data.data;
              let start = tmpurl.indexOf("#");
              if (start !== -1) tmpurl = tmpurl.substring(0, start);
              // -------------
              _this.videoSrc = tmpurl;
              _this.videoId = data.deviceIndex;
              _this.videoTitle = data.name;
              _this.videoType = data.type;
              _this.gatewayId = data.gatewayIndex;
              _this.channelNum = data.number;
              _this.$nextTick(function () {
                _this.heartBeat();
                // _this.createHeart(res.data.data, position, data.gatewayIndex)
              });
              _this.timer(); //重新执行定时器
              // console.log("_this.$refs__2:",_this);
            } else {
              _this.videoSrc = "";
              _this.videoId = "";
              _this.videoType = "";
              _this.gatewayId = "";
              _this.channelNum = "";
              _this.$nextTick(function () {});
            }
          })
          .catch((err) => {
            _this.$message.error(err.message);
          });
      }
    },
    heartBeat() {
      window.clearInterval(this.videoPlayTimer);
      this.videoPlayTimer = window.setInterval(() => {
        getHeartBeat();
        // .then()
        // .catch(err => {
        //   window.clearInterval(this.videoPlayTimer)
        // })
      }, 300000);
    },
  },
};
</script>

<style lang="scss">
.qn-video-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  &.select {
    border: 2px solid $color-danger;
  }
  .no-video {
    background: #000;
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
